<template>
    <div class="Box">
        <p :style="selIndex === 0?'color:#00a1d6':''" @click="getTypeData(0)">
            <span>全部</span>
            <span>{{ props.total }}</span>
        </p>
        <p  v-for="item in props.list" 
            :key="item.tid" 
            :style="item.tid === selIndex?'color:#00a1d6':''" 
            @click="getTypeData(item.tid)">
            <span>{{ item.name }}</span>
            <span>{{ item.count }}</span>
        </p>
    </div> 
</template>

<script lang="ts" setup>
import { ref, watch, onBeforeMount } from 'vue'
import { useRouter } from 'vue-router'

interface Props{
    list:Array<{
            count:number
            name:string
            tid:number | string
            label?:string
        }>
    total?:number
}
const props = defineProps<Props>()
const router = useRouter()
let selIndex = ref<number | string>()
const emit = defineEmits<{
    (e:'changeData',tid: string | number): void
}>()
onBeforeMount(() => {
    // if (router.currentRoute.value.query.tid && props.list) {
    //     selIndex.value = props.list.find(el => el.tid.toString() === router.currentRoute.value.query.tid)?.tid as number
    // } else {
    //     selIndex.value = 0
    // }
})


function getTypeData(tid:string | number) {
    selIndex.value = tid
    emit('changeData',tid)
}
watch(() => props.list, (val) => {
    if (router.currentRoute.value.query.tid) {
        selIndex.value = val?.find(el => el.tid.toString() === router.currentRoute.value.query.tid)?.tid
    } else {
        selIndex.value = 0
    }
},{ immediate:true })
</script>

<style lang="scss" scoped>
p{
    padding: 0;
    margin: 0;
}
.Box{
    height: 34px;
    width: 100%;
    border-radius: 6px;
    background: #edf2f9;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 35px;
    padding: 8px 20px;
    box-sizing: border-box;
    & p{
        font-size: 13px;
        line-height: 18px;
        color: #222222;
        cursor: pointer;
    }
    & p:hover{
        color: #00a1d6;
    }
    & p span:nth-child(2){
        color: #AAAAAA;
        margin-left: 10px;
    }
}
</style>